<template>
  <el-card class="column-left" ref="elCardRefInfo">
    <template #header>
      <div class="card-header">
        <span>信息窗</span>
        <svg-icon
          class-name="iconfont active"
          @click="emits('changeHide')"
          icon-class="error"
        />
      </div>
    </template>
    <el-row class="tool-header">
      <svg-icon
        v-for="(item, index) in leftTool"
        :title="item.label"
        class-name="iconfont"
        @click="handleTool(index)"
        :key="item.id"
        :icon-class="item.icon"
      />
    </el-row>

    <div class="server-list" @contextmenu="handleContextMenu">
      <el-form :model="form" label-width="auto">
        <el-form-item label="选项" size="small">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="选项" size="small">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="选项" size="small">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="选项" size="small">
          <el-select
            v-model="form.region"
            placeholder="please select your zone"
          >
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>

        <el-form-item label="选项" size="small">
          <el-col :span="11">
            <el-date-picker
              v-model="form.date1"
              type="date"
              placeholder="Pick a date"
              style="width: 100%"
            />
          </el-col>
          <el-col :span="2" class="text-center">
            <span class="text-gray-500">-</span>
          </el-col>
          <el-col :span="11">
            <el-time-picker
              v-model="form.date2"
              placeholder="Pick a time"
              style="width: 100%"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="选项" size="small">
          <el-switch v-model="form.delivery" />
        </el-form-item>
        <el-form-item label="选项" size="small">
          <el-input v-model="form.desc" type="textarea" />
        </el-form-item>
        <el-form-item label="选项" size="small">
          <el-radio-group v-model="form.resource">
            <el-radio value="Sponsor">Sponsor</el-radio>
            <el-radio value="Venue">Venue</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="选项" size="small">
          <el-input v-model="form.desc" type="textarea" />
        </el-form-item>
        <el-form-item a>
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
  <ContextMenu
    :menuItems="componentAMenuItems"
    v-model:visible="menuFlag"
    ref="contextMenuRef"
  />
</template>

<script setup>
import { nextTick } from "vue";
import ContextMenu from "../common/ContextMenu.vue";
const emits = defineEmits(["changeHide"]);
const menuFlag = ref(false);
const contextMenuRef = ref(null);
const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});
//左侧工具栏状态
const leftToolStatus = ref(-1);
const leftTool = [
  {
    id: 1,
    icon: "peitujiancha",
    label: "配图检查",
  },
  {
    id: 2,
    icon: "jisuanji",
    label: "计算机",
  },
];
//右键列表菜单
const componentAMenuItems = [
  { label: "菜单项 1", cb: componentAMenuItemsFun, icon: "huanjingshezhi" },
  { label: "菜单项 2", cb: componentAMenuItemsFun, icon: "huanjingshezhi" },
];

const onSubmit = () => {
  console.log("submit!");
};
function componentAMenuItemsFun() {
  alert("点击了");
}
const handleChange = (e) => {
  alert(e);
};
//获取鼠标位置
const handleContextMenu = (event) => {
  // 阻止默认的右键菜单行为
  event.preventDefault();
  // 获取右键菜单组件实例并设置其显示位置为鼠标点击位置
  const context = contextMenuRef.value;
  menuFlag.value = true;
  let x = event.clientX;
  let y = event.clientY;

  // 获取页面可视区域的宽度和高度
  const pageWidth = document.documentElement.clientWidth;
  const pageHeight = document.documentElement.clientHeight;
  nextTick(() => {
    // 获取右键菜单自身的宽度和高度（这里假设右键菜单已经渲染完成，可以获取到准确的尺寸）
    const menuWidth = context.$el.offsetWidth;
    const menuHeight = context.$el.offsetHeight;
    // 判断右键菜单是否超出页面右侧边界，如果超出则将其左侧位置调整为边界内
    if (x + menuWidth > pageWidth) {
      x = pageWidth - menuWidth;
    }

    // 判断右键菜单是否超出页面底部边界，如果超出则将其顶部位置往上调整
    if (y + menuHeight > pageHeight) {
      y = Math.max(0, y - menuHeight);
    }

    context.$el.style.left = x + "px";
    context.$el.style.top = y + "px";
  });
};

const elCardRefInfo = ref(null);
const isDOM = (e) => {
  e.preventDefault();
  const target = e.target;
  var isUnderTopElement = elCardRefInfo.value.$el.contains(target);
  if (!isUnderTopElement) {
    menuFlag.value = false;
  }
};
const wClick = (e) => {
  const target = e.target;
  const toolA = contextMenuRef.value.$el;
  const isInsideTool = toolA && toolA.contains(target);
  if (!isInsideTool) {
    menuFlag.value = false;
  }
};
onMounted(() => {
  window.addEventListener("click", wClick);
  // 监听整个窗口的右键点击事件
  window.addEventListener("contextmenu", isDOM);
});
onUnmounted(() => {
  window.removeEventListener("click", wClick);
  window.removeEventListener("contextmenu", isDOM);
});
</script>


<style lang="scss" scoped>
:deep(.el-form-item--small) {
  margin-bottom: 5px;
}

.column-left {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.card-header {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
  align-items: center;
  height: 100%;
}
.tool-header {
  padding-bottom: 1px;
  border-bottom: 1px solid var(--el-card-border-color);
  padding: 3px 10px;
  box-sizing: border-box;
}
.server-list {
  height: calc(100% - 34px);
  flex: 1;
  overflow: auto;
  padding: 5px;
  box-sizing: border-box;
}
:deep(.el-card__header) {
  padding: 5px !important;
  max-height: 30px !important;
  min-height: 30px !important;
}
:deep(.el-card__body) {
  height: calc(100% - 40px);
  flex: 1;
  overflow: auto;
  padding: 0 !important;
}
.iconfont {
  width: 24px;
  height: 24px;
  font-size: 24px;
  cursor: pointer;
}
</style>